<style lang="scss" scoped>
.van-icon {
  top: 5px;
}
.timeline-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}

.timeline-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

/* --------------------------------

  Main components

  -------------------------------- */

.timeline {
  position: relative;
  padding: 2em 0;
  /* margin-top: 2em; */
  /* margin-bottom: 2em; */
}

.timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 2px;
  background: #d7e4ed;
}

@media only screen and (min-width: 1170px) {
  .timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.timeline-block {
  position: relative;
  margin: 2em 0;
}

.timeline-block:after {
  content: "";
  display: table;
  clear: both;
}

.timeline-block:first-child {
  margin-top: 0;
}

.timeline-block:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 1170px) {
  .timeline-block {
    margin: 4em 0;
  }

  .timeline-block:first-child {
    margin-top: 0;
  }

  .timeline-block:last-child {
    margin-bottom: 0;
  }
}

.timeline-img {
  position: absolute;
  top: 1.1rem;
  left: 0.9rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}

.timeline-img.green {
  background: #75ce66;
}

.timeline-img.red {
  background: #c03b44;
}

.timeline-img.yellow {
  background: #f0ca45;
}

@media only screen and (min-width: 1170px) {
  .timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }

  .cssanimations .timeline-img.is-hidden {
    visibility: hidden;
  }

  .cssanimations .timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: bounce-1 0.6s;
    -moz-animation: bounce-1 0.6s;
    animation: bounce-1 0.6s;
  }
}

.timeline-content {
  position: relative;
  margin-left: 2.5rem;
  background: white;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 0.0625rem 0.375rem #d7e4ed;
}

.timeline-content:after {
  content: "";
  display: table;
  clear: both;
}

.timeline-content h2 {
  color: #303e49;
}

.timeline-content p,
.timeline-content .read-more,
.timeline-content .date {
  font-size: 13px;
  font-size: 0.8125rem;
}

.timeline-content .read-more,
.timeline-content .date {
  display: inline-block;
}

.timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}

.read-more {
  padding: 3px 5px;
  background: #acb7c0;
  color: white;
  border-radius: 0.25em;
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 12px;
}

.no-touch .timeline-content .read-more:hover {
  background-color: #bac4cb;
}

a.read-more:hover {
  text-decoration: none;
  background-color: #424242;
}

.timeline-content .date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}

.timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}

@media only screen and (min-width: 768px) {
  .timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }

  .timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }

  .timeline-content .read-more,
  .timeline-content .date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

.timeline-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.timeline-text {
  font-size: 14px;
  color: rgba(black, 0.3);
}
.timeline-date {
  font-size: 14px;
  color: rgba(black, 0.3);
  margin-top: 5px;
}

@media only screen and (min-width: 1170px) {
  .timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }

  .timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: white;
  }

  .timeline-content .read-more {
    float: left;
  }

  .timeline-content .date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }

  .timeline-block:nth-child(even) .timeline-content {
    float: right;
  }

  .timeline-block:nth-child(even) .timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: white;
  }

  .timeline-block:nth-child(even) .timeline-content .read-more {
    float: right;
  }

  .timeline-block:nth-child(even) .timeline-content .date {
    left: auto;
    right: 122%;
    text-align: right;
  }

  .cssanimations .timeline-content.is-hidden {
    visibility: hidden;
  }

  .cssanimations .timeline-content.bounce-in {
    visibility: visible;
    -webkit-animation: bounce-2 0.6s;
    -moz-animation: bounce-2 0.6s;
    animation: bounce-2 0.6s;
  }
}

@media only screen and (min-width: 1170px) {
  /* inverse bounce effect on even content blocks */
  .cssanimations .timeline-block:nth-child(even) .timeline-content.bounce-in {
    -webkit-animation: bounce-2-inverse 0.6s;
    -moz-animation: bounce-2-inverse 0.6s;
    animation: bounce-2-inverse 0.6s;
  }
}
</style>
<template>
  <div v-if="!isEmpty(records)">
    <section class="timeline-container timeline">
      <div
        @click="changeCurrentTimePoint(record)"
        v-for="record in records"
        class="timeline-block"
        :key="record.id"
      >
        <div class="timeline-img" :class="['timeline-img', 'red']"></div>

        <div class="timeline-content">
          <div class="timeline-title" v-text="record.enterpriseName"></div>
          <div class="timeline-text" v-text="record.recordDescribe"></div>

          <template v-if="!isEmpty(record.attachList)">
            <van-collapse v-model="activeNames" accordion>
              <van-collapse-item title="附件列表" :name="record.id">
                <van-cell-group
                  v-for="attach in record.attachList"
                  :key="attach.id"
                >
                  <template v-if="attach.file">
                    <a :href="attach.url" :download="attach.attachName">
                      <van-cell :title="attach.attachName" icon="down" />
                    </a>
                  </template>
                  <template v-else>
                    <div @click="openimg(attach.url)">
                      <ui-img
                        :src="attach.url"
                        style="width:100%;height:160px"
                        >{{ attach.attachName }}</ui-img
                      >
                    </div>
                  </template>
                </van-cell-group>
              </van-collapse-item>
            </van-collapse>
          </template>

          <div
            v-if="record.datetime"
            class="timeline-date"
            v-text="record.datetime"
          ></div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import _ from "lodash";
import { ImagePreview } from "vant";
export default {
  name: "zb-timeline",
  props: {
    records: {
      required: true
    }
  },
  data() {
    return {
      activeNames: [],
      defaultImg:
        ""
    };
  },
  methods: {
    openimg(url) {
      ImagePreview({
        images: [url],
        closeable: true
      });
    },
    changeCurrentTimePoint: function(record) {
      this.$on("currentPoint", record);
    },
    isEmpty: obj => _.isEmpty(obj)
  }
};
</script>
